<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../public/pic/f.png" type="image/x-icon">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../public/css/bootstrap.min.css">
    <script src="js/u_login.js"></script>
    <title>动物家宠物医院·注册账号</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
            text-decoration: none;
        }

        body {
            width: 100%;
            min-width: 1000px;
        }

        .big-div {
            width: 1000px;
            margin: 50px auto;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 20px 20px;
            padding: 20px 0;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .logo-div {
            width: 500px;
            height: 207px;
            margin: 10px auto 0;
            border-radius: 20px 20px 0 0;
        }

        .logoimg {
            width: 100%;
        }

        .form-div {
            width: 500px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .form-div label {
            margin-left: 10px;
            font-size: 20px;
        }

        .form-div input {
            text-align: center;
        }

        .option {
            text-align: right;
            font-size: 18px;
            margin-bottom: 20px;
        }

        .option a {
            text-decoration: none;
            color: darkblue;
        }

        .option a:hover{
            color: white;
            text-decoration: underline;
        }

        .wrong{
            border-color: red;
            color: red;
        }
    </style>
</head>

<body id="body">
    <div class="big-div" id="big-div">
        <!-- LOGO开始 -->
        <div class="logo-div">
            <img src="../public/pic/logo.png" alt="图片不见啦 ~ QAQ" title="动物家宠物医院" class="logoimg">
        </div>
        <!-- LOGO结束 -->

        <!-- 登录表单开始 -->
        <form class="row g-3 form-div" action="u_register.php" method="post">
            <div class="col-md-12">
                <label for="po_ID" class="form-label">输入注册登录账号（注册成功后不可修改）</label>
                <input type="text" class="form-control" id="reg_po_ID" name="userID" onchange="regID()" required>
            </div>
            <div class="col-md-12">
                <label for="po_ID" class="form-label">输入昵称</label>
                <input type="text" class="form-control" id="reg_po_name" name="userName" onchange="regName()" required>
            </div>
            <div class="col-md-12">
                <label for="po_pwd" class="form-label">输入登录密码</label>
                <input type="password" class="form-control" id="reg_po_pwd"  name="userPassword" onchange="regPwd()" required>
            </div>
            <div class="col-md-12">
                <label for="po_pwd" class="form-label">确认登录密码</label>
                <input type="password" class="form-control" id="reg_po_repwd" onchange="regRePwd()" required>
            </div>
            <div class="col-md-12">
                <label for="po_pwd" class="form-label">请输入手机号（用于联系和找回密码）</label>
                <input type="text" class="form-control" id="reg_po_phone" name="userPhone" onchange="regPhone()" required>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary" onclick="return checkReg()">注册账号</button>
            </div>
            <div class="col-12 option">|
                <a href="user_login.html">&gt;已有账号&lt;</a> |
                <a href="../../index.html">&gt;暂不登录&lt;</a> |
            </div>
        </form>
        <!-- 登录表单结束 -->
    </div>
</body>

<script>
    var big_div = document.getElementById("big-div");
    var count = 0;
    var count_flag;
    //透明度改变函数
    function Opacity_Change() {
        count++;
        big_div.style.opacity = count / 100;
        if (count == 100) {
            clearInterval(count_flag);
        }
    }

    //显示函数
    function Show() {
        clearInterval(count_flag);
        count = 0;
        count_flag = setInterval("Opacity_Change()", 1);
    }
    //调用显示函数
    Show();
    var img_array = ["login-bg1.jpg", "login-bg2.jpg", "login-bg3.jpg", "login-bg4.jpg", "login-bg5.jpg", "login-bg6.jpg", "login-bg7.jpg"];
    var body = document.getElementById("body");
    body.style.background = "url(img/login/" + img_array[Math.floor(Math.random() * (img_array.length))] + ")";
    body.style.backgroundRepeat = "no-repeat";
    body.style.backgroundSize = "cover";
</script>

</html>